import React from 'react'
import { View, Text, Image, TextInput, AsyncStorage, ScrollView } from 'react-native'
import { Fonts, Metrics, Colors } from '../Themes/'
import { API, WINDOW } from '../Services'
import styles from './Styles/CommonContainerStyles'
import Button from 'apsl-react-native-button'
import { StackActions } from '@react-navigation/native'

class LoginScreen extends React.Component {

  constructor(props) {  
    super(props)
    this.state = {
      username: '',
      password: '', 
      password: '123456',
      username: 'zxd2',    
      phoneNum: '888888',  
      phoneNum: '666666',  
      phoneNum: 'zxd8',  
    }    
  }   

  componentDidMount() {   
    const { dispatch } = this.props.navigation
    AsyncStorage.getItem('loginUser', (error, res) => {
      if (res) {
        let jsonObject = JSON.parse(res)
        console.log(jsonObject)
        WINDOW.__data.loginUser = jsonObject
        WINDOW.__data.companyName = jsonObject.companyName
        dispatch(
          StackActions.replace('Home')
        )
      }
    })
  }

  _doLogin() {
    if (!this.state.username) {
      return WINDOW.showToast('请输入账号！')
    }
    if (!this.state.password) {
      return WINDOW.showToast('请输入密码！')
    }
    const { dispatch } = this.props.navigation
    API.appLogin(this.state.username, this.state.password).then((response) => {
      const { resultCode, resultMessage, data } = response
      if (resultCode == 0) {
        WINDOW.__data.loginUser = data.userinfo
        WINDOW.__data.loginUser.companyName = data.companyName
        WINDOW.__data.companyName = data.companyName
        let json = JSON.stringify(WINDOW.__data.loginUser)
        AsyncStorage.setItem('loginUser', json)
        WINDOW.showToast('登录成功！')
        dispatch(
          StackActions.replace('Home')
        )
      } else {
        return WINDOW.showToast(resultMessage)
      }
    })
  }

  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={{ marginTop: 65 }}>
          <View style={{ height: 48, width: '100%', backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', alignSelf: 'center' }}>
            <Image source={require('../Images/icon_sj.png')} style={{ marginLeft: 30 }} />
            <TextInput
              style={{ flex: 1, height: 48, marginLeft: 17 }}
              fontSize={18}
              placeholder='请输入手机号码'
              keyboardType='numeric'
              onChangeText={(username) => {
                this.setState({ username })
              }}
            />
          </View>
          <View style={{ height: 48, width: '100%', backgroundColor: 'white', flexDirection: 'row', alignItems: 'center', alignSelf: 'center' }}>
            <Image source={require('../Images/icon_mm.png')} style={{ marginLeft: 30 }} />
            <TextInput
              style={{ flex: 1, height: 48, marginLeft: 17 }}
              fontSize={18}
              placeholder='请输入密码'
              onChangeText={(password) => {
                this.setState({ password })
              }}
            />
          </View>
        </View>
        <Button
          onPress={() => this._doLogin()}
          isDisabled={!(this.state.username && this.state.password)}
          style={{ width: Metrics.screenWidth - 30 * 2, height: 44, alignSelf: 'center', backgroundColor: Colors.buttonColor, marginTop: 40, marginBottom: 20, borderWidth: 0, borderRadius: 22 }}
          textStyle={{ color: 'white', fontSize: 18, fontWeight: 'bold' }}>
          登录
        </Button>
      </ScrollView>
    )
  }

}

export default LoginScreen